<!--
 * @Description: 
 * @Author: Binggan
 * @Date: 2019-04-15 15:45:04
 * @LastEditors: Binggan
 * @LastEditTime: 2020-03-03 16:12:58
 -->
 <template>
  <div class="content-wrap">
    <div class="manager-box">
      <Select v-model="rubType" style="width:200px" placeholder="请选择垃圾类型" @on-change="changeType">
        <Option v-for="(item,index) in equipTypes" :key="index" :value="index">{{ item.garbageTypeName }}</Option>
      </Select>
      <Button type="primary" size='large' style="margin-left:20px" @click="addEquip">添加垃圾</Button>
      <!-- <Button type="success" size='large' to="/paperType">垃圾类型管理</Button> -->
    </div>
    <!-- 列表 -->
    <Table stripe :columns="columns1" :data="allEquipments" class="m-t-20">
      <template slot-scope="{row,index}" slot="thumbnail">
        <span class="course-thumbnail">{{row.image}}</span>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <Button type="error" size="small" @click="deleteEquipment(row)">删除</Button>
      </template>
    </Table>
    <!--分页 -->
    <div style="margin: 10px;overflow: hidden">
      <p class="totalTip">共{{count}}条内容</p>
      <div style="float: right;">
        <Page :total="count" :current="page" :page-size='pageSize' @on-change="changePage"></Page>
      </div>
    </div>

    <!-- 用户添加修改 -->
    <Modal v-model="modal1" :title="isAdd?'添加垃圾':'修改垃圾'" :mask-closable="false" class-name="bing-modal">
      <!--@on-ok="amend" @on-cancel="cancAmend"-->
      <Form ref="formTypeInfo" :model="editEquip" :rules="ruleValidate" :label-width="80">
        <FormItem label="垃圾名称" prop="name">
          <Input v-model="editEquip.name"></Input>
        </FormItem>
        <FormItem label="垃圾名称" prop="name">
          <Select v-model="rubType" style="width:200px" placeholder="请选择垃圾类型" @on-change="changeType">
            <Option v-for="(item,index) in equipTypes" :key="index" :value="index">{{ item.garbageTypeName }}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="cancAmend">取消</Button>
        <Button type="primary" size="large" :loading="amendLoading" @click="amend">确认{{isAdd?'添加':'修改'}}</Button>
      </div>
    </Modal>
    <!--删除对话框 -->
    <Modal v-model="modal2">
      <p slot="header" style="color:#f60">
        <Icon type="ios-information-circle"></Icon>
        <span>删除确认</span>
      </p>
      <div style="font-size:14px">
        <p style="color:#000">请确认是否删除这条数据?</p>
        <ul class="department-delinfo">
          <li><span class="title">垃圾名称：</span><span>{{tempEquip.name}}</span></li>
        </ul>
      </div>
      <div slot="footer">
        <Button type="primary" size="large" @click="modal2=false">取消</Button>
        <Button type="error" size="large" @click="toDelete">确认删除</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
import simpleUpload from "@/components/uploadFile";
import qs from "qs";
export default {
  data() {
    return {
      ruleValidate: {
        name: [{ required: true, message: "名称不能为空！", trigger: "blur" }]
      },
      rubType: null,
      equipTypes: [],
      amendLoading: false,
      columns1: [
        { title: "垃圾名称", key: "name", sortable: true },
        {
          title: "垃圾类型",
          key: "garbageTypeName"
        },
        {
          title: "创建时间",
          key: "createTime"
        },
        {
          title: "操作",
          slot: "action"
        }
      ],
      allEquipments: [],
      tempEquip: {
        id: "",
        name: "",
        note: "",
        image: ""
      },
      editEquip: {
        id: "",
        name: ""
      },
      isAdd: true,
      modal1: false,
      modal2: false,
      count: 0,
      page: 1,
      pageSize: 10,
      tempUploadImg: "", //存储上传图片对象
      otipShow: false
    };
  },
  components: {
    simpleUpload
  },
  computed: {
    ...mapState(["user", "serviceUrl"])
    /* data1() {
      this.count=this.allEquipments.length;
      let startNum = (this.page - 1) * this.pageSize;
      let endNum =
        this.page * this.pageSize > this.count
          ? this.count
          : this.page * this.pageSize;
      console.log(startNum, endNum);
      return this.allEquipments.slice(startNum, endNum);
    }, */
  },
  methods: {
    getNewsTypes() {
      this.$axios.get("/garbageType/findAll").then(res => {
        this.count = res.data.length;
        this.equipTypes = res.data;
      });
    },
    addNewType() {
      this.modal1 = true;
      this.isAdd = true;
    },
    // edit(item) {
    //   //点击编辑
    //   this.tempEquip = item;
    // },
    cancAmend() {
      this.modal1 = false;
      this.$refs["formTypeInfo"].resetFields();
    },
    amend() {
      this.$refs["formTypeInfo"].validate(valid => {
        if (valid) {
          let url = this.isAdd ? "/garbage/add" : "/user/upUser";
          let data = {
            name: this.editEquip.name,
            type: this.equipTypes[this.rubType].id
          };
          console.log(data);
          this.amendLoading = true;
          this.$axios.post(url, qs.stringify(data)).then(res => {
            this.amendLoading = false;
            if (res.errorCode == 0) {
              this.$Message.success("操作成功!");
              this.modal1 = false;
              this.$refs["formTypeInfo"].resetFields();

              this.page = 1;
              this.getEquipmentByType();
              // if (this.rubType) {
              //   this.getEquipmentByType();
              // } else {
              //   this.getAllEquipment();
              // }
            }
          });
        } else {
          this.amendLoading = false;
          this.$Message.error("请检查无误后提交!");
        }
      });
    },
    getAllEquipment() {
      this.$axios.get("/garbage/findAll").then(res => {
        if (res.errorCode == 0) {
          console.log(res);
          this.allEquipments = res.data;
          this.count = res.data.length;
        }
      });
    },
    getEquipmentByType() {
      let params = {
        type: this.equipTypes[this.rubType].id
      };
      this.$axios.get("/garbage/findByType", { params }).then(res => {
        if (res.errorCode == 0) {
          console.log(res);
          this.allEquipments = res.data;
          this.count = res.data.length;
        }
      });
    },
    changeType(val) {
      console.log(this.rubType);
      this.getEquipmentByType();
    },
    changePage(page) {
      //分页
      this.page = page;
    },
    read(row) {
      //查看信息
      this.$router.push("/readPaper/" + row.id);
    },
    deleteEquipment(row) {
      this.tempEquip = JSON.parse(JSON.stringify(row));
      this.modal2 = true;
    },
    toDelete() {
      this.$axios
        .post(
          "/garbage/del",
          qs.stringify({id: this.tempEquip.id })
        )
        .then(res => {
          if (res.errorCode == 0) {
            this.$Message.success("删除成功！");
            this.modal2 = false;
            this.page = 1;
            this.getEquipmentByType();
            // if (this.rubType) {
            //   this.getEquipmentByType;
            // } else {
            //   this.getAllEquipment();
            // }
          } else {
            this.$Message.error("请检查无误后提交!");
          }
        });
    },
    cancEdit() {
      this.modal1 = false;
      this.tipShow = false;
      this.$refs.formAddEquip.resetFields();
      this.tempUploadImg = "";
    },
    resetForm(val) {
      !val && this.$refs.formUserInfo.resetFields();
      !val && this.$refs.formAddCourse.resetFields();
    },
    addEquip() {
      this.modal1 = true;

      this.otipShow = true;
    },
    getImgSrc(data) {
      //上传图片时本地预览路径
      console.log(data);
      this.tempUploadImg = data;
    },
    uploadSucceed(res) {
      //上传成功回调
      console.log(res);
      this.editEquip.image = res;
    }
  },
  created() {
    this.page = 1;
    this.getNewsTypes();
    // this.getAllEquipment();
  }
};
</script>
<style lang="scss" scoped>
.course-thumbnail {
  width: auto;
  height: auto;
  max-height: 80px;
}
.bing-upload-btn {
  position: relative;
  cursor: pointer;
  .img-upload {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    cursor: pointer;
    opacity: 0;
  }
}
</style>

